<!--评论管理-->
<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <el-input class="ElInput" placeholder="内容" v-model="commentMhcData.commentContent"></el-input>
        <el-input class="ElInput" placeholder="发布者" v-model="commentMhcData.hname" style="margin-left: 20px"></el-input>
        <el-input class="ElInput" placeholder="标题" v-model="commentMhcData.releaseTitle" style="margin-left: 20px"></el-input>
        <el-button icon="el-icon-search" type="primary" style="margin-left: 20px" @click="commentCheckButton()"></el-button>
        <!--表格-->
        <el-table :data="commentData" height="250" border style="margin-top: 10px;width: 100%">
          <el-table-column prop="hname" label="发布者" width="180"></el-table-column>
          <el-table-column prop="releaseTitle" label="帖子标题" width="180"></el-table-column>
          <el-table-column prop="commentContent" label="评论内容" width="180" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="publisherTime" label="评论时间" width="180"></el-table-column>
          <el-table-column prop="commentPicture" label="相关图片" width="180">
            <template slot-scope="scope">
              <el-image style="width: 70px;" :src="scope.row.commentPicture">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="fabulousCount" label="点赞量" width="150"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <span><el-button type="text" @click="commentSee(scope.row)">查看</el-button></span>
              &nbsp;&nbsp;&nbsp;
              <span><el-button type="text" @click="commentDel(scope.row.commentNumber)">删除</el-button></span>
            </template>
          </el-table-column>
        </el-table>
        <!--表格-->
      </div>
    </el-card>
<!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="commentMhcData.pageNum"
        :page-sizes="[8, 10, 15, 20]"
        :page-size="commentMhcData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--分页-->
<!--    查看详情弹窗-->
    <el-dialog title="查看详情" :visible.sync="commentSeeVisible">
      <el-form :model="commentAlone">
        <el-form-item label="发布者" :label-width="formLabelWidth">
          <el-input v-model="commentAlone.hname" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="commentAlone.releaseTitle" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="评论时间" :label-width="formLabelWidth">
          <el-input v-model="commentAlone.publisherTime" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="评论内容" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="commentAlone.commentContent" readonly></el-input>
        </el-form-item>
        <el-form-item label="相关图片" :label-width="formLabelWidth">
          <el-image :src="commentAlone.commentPicture" readonly></el-image>
        </el-form-item>
        <el-form-item label="点赞量" :label-width="formLabelWidth">
          <el-input v-model="commentAlone.fabulousCount" autocomplete="off" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
<!--    查看详情弹窗-->
  </div>
</template>

<script>
export default {
  /*Data*/
  data() {
    return {
      // 全查表格数据
      commentData:[],
      // 模糊查所需数据
      commentMhcData:{
        // 内容
        commentContent:'',
        // 发布者
        hname:'',
        // 标题
        releaseTitle:'',
        // 当前页数
        pageNum: 1,
        // 每页的数据条数
        pageSize: 10
      },
      // 全查数据总条数
      total: 0,
      // 查看单跳评论的对象
      commentAlone:{},
      formLabelWidth:'120px',
      // 查看评论弹窗开/关
      commentSeeVisible:false,
    }
  },
  /*自动挂载*/
  mounted() {
    // 评论全查
    this.commentCleck()
  },
  /*函数*/
  methods:{
    // 评论全查、模糊查、分页
    commentCleck(){
      this.$axios.post("/memberWlj/commentController/commentCleck", this.commentMhcData)
          .then(res => {
            // console.log(res.data.obj.msg)
            // debugger
            if(res.status === 200){
              if (res.data.obj.msg.length>0){
                this.commentData = res.data.obj.msg
              }else{
                this.commentData = []
              }
              this.total = res.data.obj.total
            }else{
              this.$notify({
                title: '错误',
                message: '查询错误',
                type: 'error'
              })
            }
          })
    },
    // 分页
    handleSizeChange(ps) {
      console.log("size::::" + ps)
      this.commentMhcData.pageSize = ps
      this.commentCleck()
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(ps) {
      console.log("current::::::" + ps)
      this.commentMhcData.pageNum = ps
      this.commentCleck()
      // console.log(`当前页: ${val}`);
    },
    // 查看
    commentSee(row){
      this.commentAlone = row
      // 开启查看弹窗
      this.commentSeeVisible = true
    },
    // 删除评论弹窗
    commentDel(commentNumber) {
      this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定
        this.$axios.post("/memberWlj/commentController/commentDel/" + commentNumber)
            .then(res => {
              if(res.status === 200){
                // 日志
                this.insertLog("删除评论")
                // this.insertLog("删除评论")
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                // 成功后走全查
                this.commentCleck()
              }else{
                this.$message({
                  type: 'error',
                  message: '删除失败!'
                })
              }
            })
      }).catch(() => {
        // 点击取消
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 查询按钮
    commentCheckButton() {
      // 全查
      this.commentCleck()
      // 清空模糊查数据
      this.commentEmptyMhcData()
    },
    // 清空模糊查数据
    commentEmptyMhcData(){
      this.commentMhcData.commentContent = ''
      this.commentMhcData.hname = ''
      this.commentMhcData.releaseTitle = ''
      this.commentMhcData.pageNum = 1
      this.commentMhcData.pageSize = 10
    },
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
</style>